@import '../variables';
$base-bg: #fff;
$item-color: #7b889a;
$icon-bg: #bbc5d6;
$icon-active-color: #fff;
$icon-active-bg: $item-color;
// $item-hover-bg: rgba(39, 127, 214, 1);
$dropdown-bg: #e3e3e3;

.v-sidebar-menu.vsm_white-theme {
  // background-color: $base-bg;
  .vsm--link {
    color: rgba(39, 127, 214, 1);
          // background-color: $item-open-bg;
          background-color: rgba(39, 127, 214, 0.1);
    &_exact-active,
    &_active {
      color: $item-active-color;
      background-color: $item-active-bg;
    }
    &_level-1 {
      &.vsm--link_exact-active,
      &.vsm--link_active {
        // box-shadow: 3px 0px 0px 0px $primary-color inset;
        & .vsm--icon {
          color: $icon-active-color;
          background-color: $icon-active-bg;
        }
      }
      & .vsm--icon {
        background-color: $icon-bg;
      }
    }
    &_hover,
    &:hover {
      color: $item-hover-color;
      background-color: $item-hover-bg;
    }
    &_mobile-item {
      color: $mobile-item-color;
      &.vsm--link_hover,
      &:hover {
        color: $mobile-item-color;
      }
    }
  }
  .vsm--link_level-2 {
    background-color: transparent;
  }

  &.vsm_collapsed {
    .vsm--link_level-1.vsm--link_hover,
    .vsm--link_level-1:hover {
      .vsm--icon {
        color: $mobile-icon-color;
        background-color: $mobile-icon-bg;
        
      }
    }
  }

  .vsm--icon {
    color: $icon-color;
  }

  .vsm--dropdown {
    & .vsm--list {
      // background-color: #fff;
    }
    & .vsm--link {
      color: rgba(38, 50, 56, 0.5);
      font-weight: 600;
    }
    & .vsm--icon {
      color: $dropdown-color;
      
    }
  }

  .vsm--mobile-bg {
    background-color: $mobile-item-bg;
  }

  &.vsm_expanded {
    .vsm--item_open {
      .vsm--link {
        &_level-1 {
          color: rgba(39, 127, 214, 1);
          // background-color: $item-open-bg;
          background-color: rgba(39, 127, 214, 0.1);
          & .vsm--icon {
            color: $icon-open-color;
            background-color: $icon-open-bg;
          }
        }
      }
    }
  }

  &.vsm_rtl {
    .vsm--link_level-1.vsm--link_active,
    .vsm--link_level-1.vsm--link_exact-active {
      // box-shadow: -3px 0px 0px 0px $primary-color inset;
    }
  }

  .vsm--header {
    color: rgba($item-color, 0.7);
  }
  .vsm--badge_default {
    color: $item-color;
    background-color: darken( $base-bg, 5% );
  }
  .vsm--toggle-btn {
    color: $item-color;
    background-color: darken( $base-bg, 5% );
  }
}

.vsm--item_open{
  .vsm--link_level-2.vsm--link_active{
    color: rgba(39, 127, 214, 1) !important;
  }
}

.vsm--link_level-2.vsm--link {
    cursor: pointer;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 17px;
    font-weight: 600;
    border-radius: 10px;
    line-height: 28px;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 20;
    -webkit-transition: .3s all ease;
    transition: .3s all ease;
    padding: 3px;
}